<template>
  <div class="log-container">
    <div class="time-container">
      <div v-for="(item, i) in operationLog" :key="i" class="time-item">
        <p style="margin: 0">{{ item.updateTime.trim().split(' ')[0] }}</p>
        <p style="margin: 0">{{ item.updateTime.trim().split(' ')[1] }}</p>
      </div>
    </div>
    <p-steps :current="1" direction="vertical" progress-dot>
      <p-step
        v-for="(item, i) in operationLog"
        :key="i"
        :title="item.createUserName + ':' + item.remark"
        status="finish"
      />
    </p-steps>
  </div>
</template>

<script>
export default {
  props: {
    operationLog: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // currentCount: [
      //   {
      //     title: '刘备：提交完成',
      //     status: 'finish',
      //     createTime: '2012-12-12 10:30:00',
      //   },
      //   {
      //     title: '张飞：提交审核',
      //     status: 'finish',
      //     createTime: '2012-12-12 10:30:00',
      //   },
      //   {
      //     title: '张飞：提交审核',
      //     status: 'finish',
      //     createTime: '2012-12-12 10:30:00',
      //   },
      //   {
      //     title: '张飞：提交审核',
      //     status: 'finish',
      //     createTime: '2012-12-12 10:30:00',
      //   },
      //   {
      //     title: '张飞：提交审核',
      //     status: 'finish',
      //     createTime: '2012-12-12 10:30:00',
      //   },
      //   {
      //     title: '关羽：提交审核',
      //     status: 'finish',
      //     createTime: '2012-12-12 10:30:00',
      //   },
      // ],
    };
  },
  watch: {
    operationLog: (newValue) => {},
    deep: true,
  },
  async created() {
    // console.log({ planId: this.planId });
    //
  },
};
</script>
<style lang="less" scoped>
.log-container {
  width: 100%;
  display: flex;
}
.time-container {
  width: 130px;
  .time-item {
    color: #1740dc;
    text-align: center;
    height: 90px;
    box-sizing: border-box;
  }
}
/deep/ .poros-steps-dot .poros-steps-item-content,
.poros-steps-dot.poros-steps-small .poros-steps-item-content {
  width: 95%;
}
/deep/ .poros-steps-vertical .poros-steps-item-content {
  min-height: 90px;
}
</style>
